// 阶段列表
<template>
  <div class="tableAuto">
    <div v-show="phaseCollapse">
      <div class="btngroup" style="padding-right:15px;text-align:right;margin-bottom:10px">
        <!--                <el-button type="primary" size="small" @click="handleAdd()">{{ $t("common.add") }}</el-button>-->
        <el-button type="primary" size="small" @click="handleEdit()">{{ $t("common.edit") }}</el-button>
        <!--                <el-button type="primary" size="small" @click="handleDel()">{{ $t("common.remove") }}</el-button>-->
      </div>
      <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
        :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" ref="refTable" highlight-current-row @sort-change='sortChange'>
        <el-table-column label="" width="50" align="center">
          <template slot-scope="scope">
            <div>
              <el-radio :label="scope.row.fid" v-model="childId">&nbsp;</el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" :label="$t('common.number')" width="90" align="center">
          <template slot-scope="scope">
            {{table_index(scope.$index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="linkId" show-overflow-tooltip :label="$t('basic.stage')" width="300">
          <template slot-scope="scope">
            {{scope.row.phaseDefineVo ? scope.row.phaseDefineVo.name : ""}}
          </template>
        </el-table-column>
        <el-table-column prop="addrType" show-overflow-tooltip :label="$t('basic.addr_type')" width="200">
          <!-- <template slot-scope="scope">
            {{scope.row.phaseDefineVo ? scope.row.phaseDefineVo.sn : ""}}
          </template> -->
        </el-table-column>
        <el-table-column prop="phaseNum" show-overflow-tooltip :label="$t('basic.phase_addr')" width="200">

        </el-table-column>
        <el-table-column prop="description" show-overflow-tooltip :label="$t('common.describe')">
        </el-table-column>
      </el-table>
      <div class="pagination-area">
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10,20, 30]"
          :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
        </el-pagination> -->
      </div>

      <el-dialog v-dialogDrag :title="title == 1 ? $t('common.add') :  $t('common.edit')" :visible.sync="dialogVisible"
        :close-on-click-modal="false" :width="screenWidth > 1024 ? '30%' : '50%'" append-to-body :before-close="handleClose">
        <el-form :model="formData" label-width="100px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
          <el-row :gutter="35">
            <el-col :xs="24">
              <el-form-item :label="$t('basic.equip_cls_phase')" prop="linkId" class="spread">
                <el-select v-model="formData.linkId" remote filterable placeholder="" clearable @change="handleSelectLink" disabled>
                  <el-option v-for="(item,index) in eqpClassPhaseLink" :key="index" :label="item.name" :value="item.fid"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- <el-col :xs="24">
                            <el-form-item label="类型" prop="type">
                                <el-input v-model="formData.type" placeholder="" clearable></el-input>
                            </el-form-item>
                        </el-col> -->
            <el-col :xs="24">
              <el-form-item :label="$t('basic.phase_addr')" prop="tagAddr" class="w-100">
                <el-select v-model="formData.phaseNum" remote filterable placeholder="" clearable>
                  <el-option v-for="(item,index) in phaseNumList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24">
              <el-form-item :label="$t('common.describe')" prop=" description">
                <el-input type="textarea" v-model="formData.description" placeholder="" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="handleClose">{{ $t("common.cancel") }}</el-button>
          <el-button size="small" type="primary" @click="handleSubmit('ruleForm')" :loading="loading">{{$t('common.determine')}}</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 阶段参数 -->
    <div class="title" @click="phaseParamCollapse = !phaseParamCollapse">
      {{$t('basic.phase_argu')}}
      <i class="el-icon-caret-bottom zhedie" v-show="phaseParamCollapse"></i>
      <i class="el-icon-caret-top zhedie" v-show="!phaseParamCollapse"></i>
    </div>
    <table3 ref="table3" v-show="phaseParamCollapse" :screenWidth="screenWidth" :radioId="currObj.fid"
      :phaseType="currObj.phaseDefineVo ? currObj.phaseDefineVo.type : ''"></table3>

  </div>
</template>

<script>
import { configure } from '@/api/configure'
import table3 from "./table3.vue"
export default {
  props: {
    screenWidth: Number,
    radioId: String,
    equipmentClassId: String,
    phaseCollapse: Boolean
  },
  components: {
    table3
  },
  data () {
    return {
      phaseParamCollapse: false,
      tableData: [],
      height: 32 * 6.5,
      tableLoading: false,
      dialogVisible: false,
      loading: false,
      childId: '',
      title: 1, //1新增 2 编辑
      formData: {
        linkId: "",
        addrType: "",
        // type:'',
        phaseNum: 0,
        description: ''
      },
      phaseNumList: [],
      pager: {
        pageNum: 1,
        pageSize: 555,
        total: 0,
        field: '',
        order: ''
      },
      rules: {
        linkId: [{ required: true, message: '设备类阶段不能为空', trigger: 'change' }],
      },
      currObj: {},
      eqpClassPhaseLink: [],
      addrPhase: [],
      maxNum: 0
    }
  },
  watch: {
    equipmentClassId (val) {
      this.pager.pageNum = 1
      this.getEqpClassPhaseLinkList()
    }
  },
  created () {

  },
  methods: {
    getUnitPhaseDefineList () {
      const param = {
        unitId: this.radioId,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        field: this.pager.field,
        order: this.pager.order
      }

      this.tableLoading = true
      configure.getUnitPhaseDefineList(param).then(res => {
        if (res.code == 200) {
          console.group(res.data.rows, '--')
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
      })
    },
    getEqpClassPhaseLinkList () {
      const param = {
        page: 1,
        size: 9999999999,
        eqpClassId: this.equipmentClassId
      }
      configure.getEqpClassPhaseLinkList(param).then(res => {
        if (res.code == 200) {
          this.eqpClassPhaseLink = res.data.rows.map(item => {
            return {
              name: item.phaseDefineVo ? item.phaseDefineVo.name : '',
              fid: item.fid,
              sn: item.phaseDefineVo ? item.phaseDefineVo.sn : '',
              type: item.phaseDefineVo ? item.phaseDefineVo.type : ''
            }
          })
        }
      })
    },
    rowClick (row) {
      this.childId = row.fid
      this.currObj = row


      if (row.phaseDefineVo) {
        let arr = [1, 7, 9, 10]
        let arr1 = [3, 4, 5, 6]
        if (arr.indexOf(row.phaseDefineVo.type) > -1) {
          this.phaseNumList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        } else if (row.phaseDefineVo.type == 2 || row.phaseDefineVo.type == 11) {
          this.phaseNumList = [0]
        } else if (arr1.indexOf(row.phaseDefineVo.type) > -1) {
          this.phaseNumList = [0, 1, 2, 3]
        }
      }
      this.getEqpClassPhaseLinkList()
    },
    handleAdd () {
      if (this.radioId === '') {
        this.$message.error('请选择设备');
        return
      }
      this.title = 1
      this.dialogVisible = true
    },
    async handleEdit () {
      if (this.childId === '') {
        this.$message.error(this.$t('dialog.please_sel_edit'));
        return
      }
      let res = await configure.findUnitPhaseDefine({ fid: this.childId })
      if (res.code == 200) {
        // this.formData = Object.assign({},res.data)
        this.formData = Object.assign({}, this.currObj)
        console.log(this.formData)
        this.handleSelectLink(this.formData.linkId)
        this.title = 2
        this.dialogVisible = true
      } else {
        this.$message.error('暂无此数据');
      }

      let addrRes = await configure.getAddrPhaseList({ fid: this.childId });
      if (addrRes.code == 200) {
        this.addrPhase = Object.assign({}, addrRes.data)
      }

    },
    async handleDel () {
      if (this.childId === '') {
        this.$message.error(this.$t('dialog.please_sel_del'));
        return
      }
      let res = await configure.findUnitPhaseDefine({ fid: this.childId })
      let that = this
      if (res.code == 200) {
        that.$customConfirm({
          content: "请确认是否删除单元阶段" + this.currObj.entName,
          onok () {
            configure.removeUnitPhaseDefine(res.data.fid).then(res1 => {
              if (res1.code == 200) {
                that.childId = ""
                that.getUnitPhaseDefineList()
                that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
              }
            })
          }
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getUnitPhaseDefineList()
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getUnitPhaseDefineList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getUnitPhaseDefineList()
    },
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            ...this.formData,
            unitId: this.radioId,
            // type:''
          }
          // if(this.title == 2){
          //     param.linkId = this.childId;
          // }
          this.loading = true
          configure.unitPhaseDefineAdd(param, this.title).then(res => {
            if (res.code == 200) {
              this.getUnitPhaseDefineList()
              this.dialogVisible = false
              this.$refs['ruleForm'].resetFields();
            } else {
              this.$message.error(res.msg);
            }
            this.loading = false
          }).catch(e => {
            this.$message.error('服务器繁忙,请稍后再试');
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose () {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields();
    },
    handleSelectLink (val) {
      const item = this.eqpClassPhaseLink.find(item => item.fid == val)
      if (item) {
        /**
         * item.type
         * 1 全自动
         * 7 全手动
         * 9 自动加料
         * 10 自动转料
         * 
         * 3 信息提示
         * 4 物料录入
         * 6 物料产出
         * 5 数据录入
         */
        let arr = [1, 7, 9, 10] //自动
        let arr1 = [3, 4, 5, 6]
        if (arr.indexOf(item.type) > -1) {
          this.maxNum = 9
        } else if (item.type == 2) {
          this.maxNum = 0
        } else if (arr1.indexOf(item.type) > -1) {
          this.maxNum = 3
        }

        if (arr.indexOf(item.type) > -1) {
          this.phaseNumList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        } else if (item.type == 2) {
          this.phaseNumList = [0]
        } else if (arr1.indexOf(item.type) > -1) {
          this.phaseNumList = [0, 1, 2, 3]

        }

        console.log(item)
      }
    },
  },
}
</script>

<style scoped>
.table_form {
  width: 100%;
  border-top: 1px solid #dedfe3;
  border-left: 1px solid #dedfe3;
}
thead {
  background: #f9f9f9;
}
thead td {
  font-weight: bold;
}
.table_form td,
.table_form th {
  border-right: 1px solid #dedfe3;
  border-bottom: 1px solid #dedfe3;
  text-align: center;
  min-width: 30px;
  padding: 6px 5px;
}
.theads th {
  background: rgb(234, 235, 236);
}
.tableAuto >>> .el-table__expanded-cell {
  padding: 5px 0;
}
.tableAuto >>> .el-row {
  margin: 0 !important;
}
.spread >>> .el-select {
  width: 100%;
}
.pagination-area {
  padding: 10px;
  border: 1px solid #eaebec;
  border-top: none;
}
.title {
  line-height: 35px;
  background: #3b2e58;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.zhedie {
  float: right;
  line-height: 35px;
  font-size: 18px;
  cursor: pointer;
}
</style>